<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!-- 设置网页标题 -->
    <title>击剑动作分析系统</title>
    <style>
        body {
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
            background-color: #f4f4f9;
            margin: 0;
            padding: 0;
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
        }
        .container {
            background: white;
            padding: 30px;
            border-radius: 10px;
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
            width: 300px;
            text-align: center;
        }
        h1 {
            color: #333;
            margin-bottom: 20px;
        }
        input[type="file"], select, input[type="number"] {
            width: 100%;
            padding: 10px;
            margin: 10px 0;
            border: 1px solid #ddd;
            border-radius: 5px;
        }

        .button-row {
            display: flex;
            justify-content: space-between; /* 添加间距 */
            width: 100%;
            margin-top: 20px;
        }

        button {
            background-color: #868e96;
            color: white;
            border: none;
            padding: 10px 20px;
            border-radius: 5px;
            cursor: pointer;
            width: 100%;
        }
        button:hover {
            background-color: #1e1e1e;
        }
        video {
            width: 100%;
            border-radius: 5px;
            margin-top: 20px;
        }
    </style>
</head>



<body>
    <div class="container">
        <h1 style="margin: 10px;">击剑动作分析</h1>
    <!-- 创建uploadForm表单，收集用户信息 -->

    <form id="uploadForm" style="margin: 10px;"
    action="/upload" method="post" enctype="multipart/form-data">
        <!-- 收集video文件 -->
        <label for="videoInput">选择视频或照片:</label>

        <!-- 增加style -->
        <input type="file" style="color: brown;" id="videoInput" name="video" accept="video/*,image/*" 
required><br><br>
<!-- 添加画布用于显示实时分析结果 -->

    <!-- 增加视频预览 -->
    <div class="preview-container">
        <h3 style="margin-top: 5px;">视频预览</h3>
        <video id="videoPreview" class="preview-video" controls></video>
        <div id="videoInfo" class="file-info"></div>
    </div>
        <!-- 设置下拉选择菜单，收集人物位置 -->

        <label style="margin: -5px; padding-top: 20px;" for="sideInput">选择人物位置:</label>
        <select id="sideInput" name="side">
            <option value="0">单人视频</option>
            <option value="1">左边人物</option>
            <option value="2">右边人物</option>
        </select><br><br>
        <!-- 设置数字输入，收集用户身高 -->
        <label style="margin: -5px; margin-top: 10px;" for="heightInput">输入身高 (cm):</label>
        <input type="number" id="heightInput" name="height" 
value="170" required><br><br>


        <!-- 创建*上传视频*按钮，点击后运行submitForm函数      增加style-->
        <button style="margin: 8px;" type="button" 
        onclick="submitForm('competition')">比赛分析(实战)</button>
        <button style="margin: 8px;" type="button" 
        onclick="submitForm('analysis')">动作分析(单动作)</button>
        <input type="hidden" id="fileType" name="fileType">
    </form>
     <!-- 结束表单 -->
    </div>

    <script>
        // 视频预览
        document.getElementById('videoInput').addEventListener('change', function(e) {
            const file = e.target.files[0];
            if (file) {
                const videoURL = URL.createObjectURL(file);
                document.getElementById('videoPreview').src = videoURL;
                document.getElementById('fileType').value = file.type; // 存储文件类型
            }
        });

        function submitForm(buttonType) {
            // 检查视频文件，如果为空，提示
            // var videoInput = document.getElementById('videoInput');
            // if (videoInput.value === '') {
            //     alert('请先选择一个视频文件');
            //     return;
            // }

            const videoInput = document.getElementById('videoInput');
            const fileType = document.getElementById('fileType').value;

            if (videoInput.value === '') {
                alert('请先选择一个视频文件或照片');
                return;
            }

            if (buttonType === 'competition' && !fileType.startsWith('video/')) {
                alert('比赛分析只能上传视频文件');
                return;
            }

            if (buttonType === 'analysis' && !fileType.startsWith('image/')) {
                alert('动作分析只能上传照片文件');
                return;
            }
            const formData = new FormData(document.getElementById('uploadForm'));
            formData.append('button_type', buttonType);
            formData.append('file_type', fileType); // 添加文件类型
            fetch('/upload', {
                method: 'POST',
                body: formData
            })
            .then(response => response.json())
            .then(data => {
                if (buttonType === 'competition') {
                    window.location.href = `/competition?video_path=${encodeURIComponent(data.video_path)}
                    &side=${data.side}
                    &height=${data.height}`;
                    
                } else if (buttonType === 'analysis') {
                    window.location.href = `/analysis?video_path=${encodeURIComponent(data.video_path)}
                    &side=${data.side}
                    &height=${data.height}`;
                }
            })
            .catch(error => {
                console.error('Error:', error);
            });
        }

        // window.onload = function() {
        //     if (window.location.pathname === '/competition') {
        //         const videoPath = new URLSearchParams(window.location.search).get('video_path');
        //         const side = new URLSearchParams(window.location.search).get('side');
        //         const height = new URLSearchParams(window.location.search).get('height');
        //         // fetch(`/start_processing?video_path=${encodeURIComponent(videoPath)}&side=${side}&height=${height}`)
        //         fetch(`/start_processing?video_path=${encodeURIComponent(videoPath)}&side=${side}&height=${height}`, {
        //         method: 'POST',
        //     })
        //         .then(response => response.text())
        //         .then(data => {
        //             console.log(data);  // 打印响应内容
        //         })
        //         .catch(error => {
        //             console.error('Error:', error);
        //         });
        //     }
        // };


    </script>
</body>
</html>